<template>
  <el-card
    ><el-form ref="ruleFormRef" label-width="120px" class="demo-ruleForm">
      <el-form-item label="广告名称：" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="广告位置：">
        <el-select
          v-model="ruleForm.type"
          class="m-2"
          placeholder="全部"
          size="default"
        >
          <el-option label="PC首页轮播" value="0">PC首页轮播</el-option>
          <el-option label="APP首页轮播" value="1">APP首页轮播</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间："
        ><el-date-picker
          v-model="ruleForm.startTime"
          type="date"
          placeholder="选择日期"
          prefix-icon="Clock"
        />
      </el-form-item>
      <el-form-item label="到期时间：" prop="name"
        ><el-date-picker
          v-model="ruleForm.endTime"
          type="date"
          placeholder="选择日期"
          prefix-icon="Clock"
        />
      </el-form-item>
      <el-form-item label="上线/下线："
        ><el-radio-group v-model="ruleForm.status">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="广告图片:">
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          :action="action"
          :on-success="handlelBigpic"
          list-type="picture"
        >
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">只能上传jpg/png文件，且不超过100kb</div>
          </template>
        </el-upload>
      </el-form-item>

      <el-form-item label="排序：" prop="resource"
        ><el-input v-model="ruleForm.sort" />
      </el-form-item>
      <el-form-item label="广告链接："
        ><el-input v-model="ruleForm.url" />
      </el-form-item>
      <el-form-item label="广告备注：">
        <el-input
          v-model="ruleForm.note"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onConfirm">提交</el-button>
        <el-button @click="">重置</el-button>
      </el-form-item>
    </el-form></el-card
  >
</template>

<script lang="ts" setup>
import * as tianjia from "../../request/api";
import { ref } from "vue";
import { Controller } from "../../request/SmsHomeAdvertiseController/index";
import type { Ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import type { UploadProps, UploadUserFile } from "element-plus";
let router = useRouter();
const ruleForm = ref({}) as Ref<Controller>;
let action = ref("http://120.24.64.5:8088/mall-admin/minio/upload");

const fileList = ref<UploadUserFile[]>([]);

//上传大图
const handlelBigpic: UploadProps["onSuccess"] = (file) => {
  console.log(file.data.url);
  ruleForm.value.pic = file.data.url;
};

let onConfirm = () => {
  ElMessageBox.confirm("你确定要添加吗?", "提示", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(() => {
      let haha = ruleForm.value;
      tianjia.ment.getControlleradd(haha);
      router.push("/sms/homeAdvertise");
      ElMessage({
        type: "success",
        message: "添加成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "添加失败",
      });
    });
};
</script>

<style lang="scss" scoped>
.el-card {
  margin: 30px auto;
  width: 60%;
  padding: 30px;

  .el-input {
    width: 350px;
  }

  .el-textarea {
    width: 350px;
  }
}
</style>
